<!--
  分页组件        zls-2022/01/25
    Attributes： 支持el-pagination的所有Attributes
    Demo：
      <z-pagination :total="total" :page-size="pageSize" :current-page="page" @current-page="pageChange" @size-change="sizeChange"></z-pagination>

      const total = ref<number>(0)
      const pageSize = ref<number>(15)
      const page = ref<number>(1)
      function pageChange(val: number) {
        console.log(2222, val)
      }
      function sizeChange(val: number) {
        console.log(1111, val)
      }
-->
<template>
  <el-pagination
    :small="$attrs.small"
    :background="$attrs.background || true"
    :total="$attrs.total || 0"
    :page-size="$attrs['page-size'] || 15"
    :pager-count="$attrs['pager-count']"
    :current-page="$attrs['current-page']"
    :layout="$attrs.layout || 'total, sizes, prev, pager, next, jumper'"
    :page-sizes="$attrs['page-sizes'] || [15, 30, 45, 60]"
    :popper-class="$attrs['popper-class']"
    :disabled="$attrs.disabled"
    :hide-on-single-page="$attrs['hide-on-single-page']"
    @size-change="sizeChange"
    @current-change="currentChange"
  >
  </el-pagination>
</template>

<script lang="ts" setup>
const emit = defineEmits(['current-page', 'size-change'])
// 分页操作(当前页)
function currentChange(val: number) {
  emit('current-page', val)
}
// 分页操作(每页多少条)
function sizeChange(val: number) {
  emit('size-change', val)
}
</script>
<script lang="ts">
export default {
  name: 'z-pagination'
}
</script>
